<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    margin: 0; 
    padding: 0;
  }
  .nav{
    width: 300px;
    height: 30px;
    padding: 0;
    /* background-color: pink; */
    display: flex;
    list-style: none;
    background-color: rgb(180, 217, 240);
  }
  .nav li{
    width: 100px;
    height: 100%;
    justify-content: center;
    margin: 0;
    text-align: center;
    line-height: 30px;
  }
  .nav li a{
    text-decoration: none;
  }
  .nav li:hover{
    background-color: rgb(54, 94, 225);
    color: pink;
  }
  /* .nav li a:hover{
    color: pink;
  } */

</style>
<body>
  <ul class="nav">
    <li class="home">
      <a href="./home.html" target="_blank">首页</a>
    </li>
    <li class="about">
      <a href="./about.html" target="_blank">关于</a>
    </li>
    <li class="contact">
      <a href="./contact.html" target="_blank">联系我们</a>
    </li>
  </ul>
</body>
</html>